<template>
	<view class="outside">
		<scroll-view scroll-y="true" class="content">
			<activityChildrenItem @checkedChange="checkedChange(arguments)" v-for="(item,index) in childrenActivityList"
				:index="index" :img="item.img" :title="item.title" :dateString="item.dateString"
				:location="item.location">
			</activityChildrenItem>
		</scroll-view>
		<view class="btn" @click="handlerClick">
			<button>预约活动</button>
		</view>
		<image class="top-btn" src="../../static/icon_backtotop@2x.png" @click="toTop"></image>
	</view>
</template>

<script>
	import activityChildrenItem from '../customer/activityChildrenItem.vue'
	export default {
		components: {
			activityChildrenItem
		},
		data() {
			return {
				childrenActivityList: [{
					id:1,
					img: '../../static/石墨镌华——铜镜拓印体验   16 9.jpg',
					title: '石墨镌华——铜镜拓印体验',
					dateString: '2021年7月19日',
					location: '盐城市博物馆',
					checked: false
				}, {
					id:1,
					img: '../../static/熏香染袂   16 9.jpg',
					title: '熏香染袂—香纂、香丸制作',
					dateString: '2021年7月19日',
					location: '盐城市博物馆',
					checked: false
				}, {
					id:1,
					img: '../../static/操缦遗音—古琴展演及体验   16 9.jpg',
					title: '操缦遗音—古琴展演及体验',
					dateString: '2021年7月19日',
					location: '盐城市博物馆',
					checked: false
				}, {
					id:1,
					img: '../../static/青瓯瀹茗—宋式点茶、斗茶     16 9.jpg',
					title: '青瓯瀹茗——宋式点茶、斗茶',
					dateString: '2021年7月19日',
					location: '盐城市博物馆',
					checked: false
				}, {
					id:1,
					img: '../../static/子慕予裳   16 9.jpg',
					title: '子慕予裳——汉服体验',
					dateString: '2021年7月19日',
					location: '盐城市博物馆',
					checked: false
				}, {
					id:1,
					img: '../../static/美人云鬓——花簪制作     16 9.jpg',
					title: '美人云鬓——花簪制作',
					dateString: '2021年7月19日',
					location: '盐城市博物馆',
					checked: false
				}]
			}
		},
		methods: {
			handlerClick() {
				let list = []
				for (let item of this.childrenActivityList) {
					if (item.checked) {
						list.push(item)
					}
				}
				console.log(encodeURIComponent(JSON.stringify(list)))
				uni.navigateTo({
					url: "../order/order?list=" + encodeURIComponent(JSON.stringify(list))
				})
			},
			checkedChange(e) {
				let item = this.childrenActivityList[e[0]]
				item.checked = e[1]
				this.childrenActivityList[e[0]] = item
				// console.log(e[0]+" "+this.childrenActivityList[e[0]])
			},
			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0
				})
			}
		}
	}
</script>

<style>
	.outside {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		/* height: calc(100% - 80rpx); */
		padding-bottom: 100rpx;
	}

	.btn {
		position: fixed;
		height: 100rpx;
		bottom: 0rpx;
		left: 0rpx;
		/* width: calc(100% - 40rpx); */
		width: 100%;
		/* z-index: 10; */
	}

	.btn button {
		width: 100%;
		height: 100%;
		color: #fff;
		border: 0;
		font-size: 32rpx;
		line-height: 100rpx;
		border-radius: 0;
		background: #B9AC90;
	}
	
	.top-btn {
		position: fixed;
		height: 120rpx;
		width: 120rpx;
		bottom: 120rpx;
		right: 0rpx;
	}
</style>
